<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { useRouter, useRoute } from "vue-router"
import { ref, toRefs, onActivated, nextTick } from 'vue';
import type { VideoItem } from "@/type/lidare"
interface swiperType extends HTMLElement {
  swipeTo(index: number, type: boolean): () => void
}
const router = useRouter();
const route = useRoute();
const store = useCounterStore();
const { getMoreVideoList } = store;
const { videoList } = toRefs(store);
const showList = ref<Array<VideoItem>>([]);
const id = ref(0);
let swiper: swiperType;
let allVideo: Array<HTMLVideoElement> = [];
let lastVideo: HTMLVideoElement;
let lastIndex = 0;//上一次轮播的页面
const nowIndex = ref(0);//当前轮播第一项在videoList的下标
const weCatIndex = ref(0);//记录当前看到的视频在videoList中的下标
let jump = false;
onActivated(() => {
  jump=true;
  id.value = Number.parseInt(route.params.id as string);
  nowIndex.value = videoList.value.findIndex(el => Number.parseInt(el.id) == id.value);
  console.log(nowIndex.value, "nowIndex.value");
  weCatIndex.value = nowIndex.value;
  getMoreList();
});
const getMoreList = () => {
  if (nowIndex.value + 5 >= videoList.value.length) {
    getMoreVideoList();
  }
  showList.value = videoList.value.slice(nowIndex.value, nowIndex.value + 5);
  nextTick(() => {
    if(jump){
      jump=false;
      swiper.swipeTo(0,true);
    }
    // allVideo[0].play();
  })
}
const changeVideoPlay = (index: number) => {
  let video = allVideo[index];
  if (lastVideo != video) lastVideo?.pause();
  lastVideo = video;

  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}
const changeSwipeIndex = (index: number) => {
  weCatIndex.value = videoList.value.findIndex(el => el.id == showList.value[index].id);
  if (lastIndex == 4 && index == 0) {
    nowIndex.value += 5;
    getMoreList();
  } else if (lastIndex == 0 && index == 4) {
    nowIndex.value -= 5;
    if (nowIndex.value < 0) nowIndex.value = 0;
    getMoreList();
  }
  lastIndex = index;
  changeVideoPlay(index);
}
</script>
<template>
  <div class="fixed-zbest plant-video-detail ">
    <header class="header">
      <van-icon name="arrow-left" @click.stop="router.go(-1)" />
    </header>
    <div class="content">
      <van-swipe :ref="el => swiper = (el as swiperType)" class="my-swipe" @change="changeSwipeIndex"
        :loop="weCatIndex == 0 ? false : true" indicator-color="white" vertical :show-indicators="false">
        <van-swipe-item v-for="(item, index) in showList" :key="index">
          <div class="item">
            <video :ref="el => allVideo[index] = (el as HTMLVideoElement)" @click.stop="changeVideoPlay(index)"
              class="video" :src="item.videoUrl"></video>
            <div class="item-footer">
              <div class="user">
                <div class="img-box">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35px"
                    height="35px">
                    <image x="0px" y="0px" width="35px" height="35px"
                      xlink:href="data:img/png;base64,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" />
                  </svg>
                </div>
                <div class="author">{{ item.author }}</div>
              </div>
              <div class="title">{{ item.citation }}</div>
            </div>
            <div class="slide-op">
              <div class="slide-op-item">
                <div class="img-box">
                  <van-icon name="like-o" />
                </div>
                <div class="text">{{ item.commentCount }}</div>
              </div>
              <div class="slide-op-item">
                <div class="img-box">
                  <van-icon name="chat-o" />
                </div>
                <div class="text">{{ item.likeNum }}</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.plant-video-detail {
  width: 100%;

  .header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    font-size: .2rem;
    // background-color: var(--bgc-black);
    // color: var(--text-white);
    color: rgba($color: #ffffff, $alpha: .8);
    line-height: .5rem;
    padding: 0 .15rem;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0));
  }

  .content {
    width: 100%;
    height: 100%;

    .my-swipe {
      width: 100%;
      height: 100%;

      .item {
        position: relative;
        width: 100%;
        height: 100vh;
        color: var(--text-white);
        background-color: rgba($color: #000000, $alpha: .9);
        &::before{
          content: '正在加载...';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          color: var(--text-white);
          text-align: center;
          line-height: 100vh;
          z-index: 0;
        }
        video{
          position: relative;
          z-index: 10;
        }

        .item-footer {
          position: absolute;
          bottom: 0.1rem;
          left: 0;
          width: 100%;
          box-sizing: border-box;
          padding: 0 .15rem;
          z-index: 20;

          .user {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: .05rem;

            .img-box {
              width: .35rem;
              height: .35rem;
              border-radius: 50%;
              overflow: hidden;
              margin-right: .1rem;
            }

            .author {
              opacity: .8;
            }
          }

          .title {
            opacity: .8;
          }
        }

        .slide-op {
          position: absolute;
          right: .15rem;
          bottom: 0.5rem;
          z-index: 20;

          .slide-op-item {
            width: .5rem;
            margin-bottom: .15rem;

            .img-box {
              position: relative;
              width: .4rem;
              height: .4rem;
              font-size: .3rem;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              border-radius: 50%;
              margin: 0 auto;
              opacity: .8;

              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: var(--bgc-black);
                opacity: .1;
              }
            }

            .text {
              width: 100%;
              text-align: center;
              margin-top: .05rem;
              font-size: .12rem;
            }
          }
        }
      }
    }
  }
}
</style>